// pkg/pages/articleDetail.js
const {BASE_URL, PIC_URL} = require('../../../config')
import { replaceBaseUrl } from '../../../utils/util'
let timer = null
Page({
  /**
   * 页面的初始数据
   */
  data: {
    html: '',
    id: '',
    title: '',
    views: '',
    likes: '',
    content: '', // 临时未加工内容
    createdTime: '',
    isClick: 0,
    viewThreshold: 5000,
    avatarList: []
  },
  _getArticle(id) {
    const token = wx.getStorageSync('token')
    const that = this
    wx.request({
      url: BASE_URL + `/article/get_article/${id}`,
      header: {
        token: token
      },
      
      success(res) {
        if (res.data.code !== 200) {
          wx.showToast({
            title: '获取文章详情失败',
            icon: 'error'
          })
        }
        let info = res.data.data
        info.createdTime = info.createdTime.split('T').join(' ')
        that.setData({
          id: info.id,
          title: info.title,
          views: info.views,
          likes: info.likes,
          content: info.content,
          createdTime: info.createdTime
        })
        that._htmlFix(info.content)
      }
    })
    
  },
  _htmlFix(content){
    // 替换土片地址
    // const res = this.data.html.replace(/\<img/gi, '<img style="display: block; margin: 0 auto;" ') //正则替换
    // console.log(res);
    // this.setData({
    //   html: res
    // })
    // const html = this.data.html;
    // 使用正则表达式匹配<img>标签并处理
    let res = content.replace(/(<img[^>]*>)/gi, this._processImgTag);
    
    res = this._processSrc(res, PIC_URL)
    // console.log(res);
    this.setData({
      html: res
    });
  },
  _processImgTag(match, imgTag) {
    // 检查是否已经有style属性
    if (imgTag.includes('style="')) {
      // 如果已经有style属性，添加新的样式
      return imgTag.replace(/style="([^"]*)"/, 'style="$1; display: block; margin: 0 auto;"');
    } else {
      // 如果没有style属性，直接添加新的style属性
      return imgTag.replace(/<img/, '<img style="display: block; margin: 0 auto;"');
    }
  },
  _processSrc(html, newBaseUrl) {
    // 定义正则表达式匹配 <url> 标签
    // 定义正则表达式匹配 <img> 标签的 src 属性
  const imgSrcRegex = /<img[^>]*src="([^"]+)"[^>]*>/gi;

  // 替换函数
  const replaceFunction = (match, url) => {
    // 提取原URL的路径部分
    const path = url.replace(/https?:\/\/[^\/]+/, ''); // 匹配并移除协议和域名
    // 拼接新的URL
    const newUrl = `${newBaseUrl}${path}`;
    // 替换原URL为新的URL
    return match.replace(url, newUrl);
  };

  // 替换HTML中的图片地址
  const result = html.replace(imgSrcRegex, replaceFunction);

  return result;
  },
  async changeThumb() {
    const token = wx.getStorageSync('token')
    await wx.p.request({
      url: BASE_URL + '/behavior/like',
      method: 'POST',
      header: {
        token: token
      },
      data: {
        articleId: this.data.id,
        isLike: this.data.isClick
      }
    })
    this._getAvatarList(this.data.id)
  },
  async _getAvatarList(id) {
    const token = wx.getStorageSync('token')
    const res = await wx.p.request({
      url: BASE_URL + `/behavior/get_behavior/${+id}`,
      method: 'POST',
      header: {
        token: token
      }
    })
    let data = res.data.data
    const newList = data.likeUsers.map(element => {
      return replaceBaseUrl(PIC_URL, element)
    });

    this.setData({
      isClick: data.isLike,
      avatarList: newList
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this._getArticle(options.id)
    this._getAvatarList(options.id)
    const token = wx.getStorageSync('token')
    timer = setTimeout(() => {
      wx.request({
        url: BASE_URL + `/behavior/article_view/${this.data.id}`,
        method: 'POST',
        header: {
          token: token
        },
        success() {}
      })
      clearTimeout(timer)
    }, this.data.viewThreshold)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    clearTimeout(timer)
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    clearTimeout(timer)
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})